<template>
  <div class="hello">
    <form action class="menu">
      <h2>用户登录</h2>
      <div class="item">
        <label for="user">用户名</label>
        <input v-model="username" type="text" class="user side" />
      </div>
      <div class="item">
        <label for="cipher">密码</label>
        <input v-model="password" type="password" class="cipher side" />
      </div>
      <button v-if="username.length>0&&password.length>0" @click="login" class="rigister">登录</button>
      <button class="rigister" v-else>登录</button>
    </form>
  </div>
</template>
<script>
import http from "@/api/port";
import { mapMutations } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      password: "",
      username: ""
    };
  },
  methods: {
    ...mapMutations(["setToken"]),
    login() {
      if (!/^[a-zA-Z0-9_-]{4,16}$/.test(this.username)) {
        this.$message.error("用户名错误");
        return false;
      } else if (this.password.length < 6) {
        this.$message.error("密码错误");
      } else {
        http("login", {}, "post", {
          password: this.password,
          username: this.username
        }).then(res => {
          // this.$message('登录成功');
          this.$message({ message: "登录成功", type: "success" });
          console.log("登录", res);
          // this.setToken(res.data.token)
          this.$store.commit("setToken", res.data.token);
          this.$router.push({ name: "Backstage" });
        });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  background-color: #324152;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu {
  background-color: #fff;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
}
.item {
  margin-bottom: 22px;
  label {
    padding: 0 0 10px;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    display: block;
  }
  .side {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
  }
}
.rigister {
  width: 100%;
  height: 40px;
  color: #fff;
  background-color: #409eff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  font-size: 14px;
}
</style>